1-Versatilidade das tags

Para fazer uma boa página web precisamos conhecer as tags html, como elas interagem entre sí, o que uma tag interfere na outra, qual tag pode ser container (abrigar outras tags dentro de sí) de outras tags, que efeito ou recurso podemos obter associando tags.

1.1-Tag link - Apenas texto

Uma tag link pode conter apenas um texto explicativo informando o que irá fazer se for clicada como no exemplo abaixo :

Ao clicar aqui você ira para www.google.com

Código
<a href="www.google.com">Ao clicar aqui você ira para www.google.com</a>

1.2-Tag link - Imagem dentro da tag link

Ao colocarmos uma imagem dentro da tag link a imagem inteira serve como link. Veja o exemplo:

Dizemos que a tag link serviu de container para a tag image ou que a tag link é a tag pai da tag imagem que é a tag filha.

Código:
                <a href="www.google.com">
                    <img src="../imagens/flor1.jpg" style="width:300px" />
                </a>

1.3-Tag link - Contendo Image e texto

Neste exemplo colocaremos 2 tags dentro da tag link : img e texto:

Este seria um texto comum mas como esta dentro da tag <a> acabou virando um link.

Código:
                <a href="www.google.com">
                    <img src="../imagens/flor1.jpg" style="width:300px" />
                    <br />
                    Este seria um texto comum mas como esta dentro da tag <a> acabou virando um link.
                </a>

Resumindo: Observando as explicações acima notamos um fato incrível das tags : Elas conseguem umas influenciarem as outras. O que seria uma simples imagem ao ser 'contida' dentro de uma tag link acabou virando uma imagem-link. O que era para ser uma mensagem de texto simples ao ser 'contida' dentro de uma tag link acabou virando um link também. Os elementos filhos herdam propriedades ou características da classe ('tag') pai ( 'container'' ) . Com isto podemos dizer que estamos agregando uma funcionalidade que a tag filha não possui através de uma tag pai.

2-Associando tags e somando características

Se você escrever um texto numa página HTML verá que é impossível alinhar o texto à esquerda, ao centro ou à direita pela CSS. Isto se deve ao fato que ao escrever o texto o HTML utiliza o estilo 'em-linha' ( inline ) ao texto (onde muitas tags são exibidas na mesma linha) e, por causa disso o posicionamento da tag é feito pelo DOM / Browser e não há nada no HTML ou nos estilos de alinhamento que você possa utilizar que possa mudar isso.

O browser não sabe o que vêm depois da tag atual e, como elas serão exibidas na mesma linha, não pode 'dimensionar' ou 'posicionar' porque dependeria de todos elementos exibidos na linha. Não se esqueça que se você aumentar ou diminuir a janela do browser alteraria a exibição destes elementos na página também e esse efeito esta à cargo do browser.

Exemplo : Este texto deveria estar alinhado à direita da janela

Código:
Exemplo : <span style="text-align:right">Este texto deveria estar alinhado à direita da janela</span>

Não funciona nem com reza brava, pode ficar tranquilo.

Contudo se você associar o texto a um estilo 'bloco' ( block ) ao invés de do 'em linha' nativa da tag você consegue obter o alinhamento desejado. Veja o exemplo abaixo.

Código:
            <div style="text-align:right">Este texto é exibido à direita porque esta numa tag div</div>

Este efeito ocorre porque a tag div é exibida em bloco, ou seja, ela ocupa exclusivamente uma linha ( não admite outra tag na mesma linha ) e com isso o browser consegue alinhar ou dimensionar objeto da maneira que queremos.

Resumindo: Ao colocar uma tag tipo 'em-linha' dentro de uma tag tipo 'bloco' a tag 'em-linha' acaba recebendo as propriedades da tag pai ( bloco ) e com isso admite posicionamento ou dimensionamento de suas características.
Este é um efeito muito utilizado, pode guardar ele no seu cinto de utilidades.

Mudando o estilo de exibição da tag

Você pode pedir ao browser para mudar o estilo de exibição default de uma tag através da tag display e com isso uma tag em-linha é exibida como bloco e ai você pode mudar as características e formato como desejar. Veja exemplo abaixo:
Este texto é exibido à direita porque seu estilo é 'bloco'

Código:
            <span style="display:block;text-align:right">Este texto é exibido à direita porque seu estilo é 'bloco'</span>

Note que a tag span é em linha mas ao mudarmos o modo de sua exibição para 'bloco' o conteúdo dela acaba recebendo essa característica e com isso podemos formatá-la como quizermos.

Influência entre tags de mesma classe

Muitas tags não tem o 'poder' de conter outras tags, outras não podem conter tags do mesmo tipo e outras nem mesmo de tipos diferentes.

Por exemplo não podemos aninhar uma tag p dentro de outra tag p. Contudo a tag p pode conter outras tags como as de formatação de texto. Veja o exemplo abaixo:

Texto antes da tag span Texto dentro da tag span Texto depois da tag span

Código:
        <p>
            Texto antes da tag span
            <span style="color:royalblue">Texto dentro da tag span</span>
            Texto depois da tag span
        </p>

Portanto a tag p NÃO pode conter outra tag p dentro dela mas pode conter uma tag span dentro dela. E se dentro da tag span tivesse outra tag p ? Não pode não...a tag p pode ter uma tag span mas uma tag span não pode conter uma tag p dentro dela.

Resumindo: Um grande número de tags HTML pode conter outras tags dentro dela, ou seja, servem de containers para outras tags.
Contudo, não existe uma regra geral de quem pode conter o que, isto só pode ser definido por pesquisas e experiências.
Muitas IDEs como o visual studio informam sobre esses erros mesmo no código html da página hachurando a tag.
Contudo, os principais efeitos como, por exemplo, incluir um texto dentro de uma tag div para que possamos alinhar e formatar ele da maneira que queremos, deve ser conhecida pelo programador web porque é muito utilizada no dia-a-dia.